import React, { useEffect, useState } from 'react';
import CardiogramChart from '@antelopecloud/charts/lib/ACCardiogramChart';

function generateInitData() {
  const result: any[] = [];

  for (let i = 0; i <= 60; i += 1) {
    result.push({
      y: 0,
      x: i,
    });
  }

  return result;
}


const Chart = () => {

  const [data, setData] = useState<any[]>(generateInitData());

  useEffect(() => {
    const timer = setInterval(() => {
      data.unshift({
        y: Math.random() * 100 + 50,
        x: 0,
      });

      if (data.length > 60) {
        data.pop();
      }
      const newData: any[] = [];

      data.forEach((item, index) => {
        newData.push({ x: index, y: item.y });
      });

      setData(newData);
    }, 1000);

    return () => {
      clearInterval(timer);
    };
  }, []);

  return (
    <CardiogramChart
      type="percent"
      data={data}
      color="#3399CC"
      max={1000}
    />
  );
};

export default Chart;